﻿@model ProductModel.ProductVariantAttributeValueModel

@{
    var parentModel = ViewData["Parent"] as ProductModel.ProductVariantAttributeValueListModel;
}

<datagrid id="product-attribute-values-grid" 
          allow-resize="true" 
          allow-row-selection="true"
          allow-column-reordering="true">
    <datasource read="@Url.Action("ProductAttributeValueList", new { productVariantAttributeId = parentModel.ProductVariantAttributeId })"
                delete="@Url.Action("ProductAttributeValueDelete")" />
    <paging position="Bottom" page-index="1" show-size-chooser="false" />
    <sorting enabled="true">
        <sort by="DisplayOrder" />
    </sorting>
    <toolbar>
        <toolbar-group>
            <button type="button" id="btnAddNewValue" name="btnAddNewValue" value="btnAddNewValue" class="btn btn-primary btn-flat no-anims mr-auto">
                <i class="fa fa-plus"></i>
                <span>@T("Admin.Catalog.Products.ProductVariantAttributes.Attributes.Values.AddNew")</span>
            </button>
        </toolbar-group>
        <zone name="datagrid_toolbar_alpha"></zone>
        <toolbar-group class="omega"></toolbar-group>
        <zone name="datagrid_toolbar_omega"></zone>
        <toolbar-group>
            <button datagrid-action="DataGridToolAction.DeleteSelectedRows" type="button" class="btn btn-danger no-anims btn-flat">
                <i class="far fa-trash-alt"></i>
                <span>@T("Admin.Common.Delete.Selected")</span>
            </button>
        </toolbar-group>
    </toolbar>
    <columns>
        <column for="Name" hideable="false" width="4fr">
            <display-template>
                @Html.VariantAttributeValueName()
            </display-template>
        </column>
        <column for="Alias" width="2fr" />
        <column for="LinkedProductName" width="2fr" sortable="false">
            <display-template>
                @Html.LabeledProductName("item.row.LinkedProductTypeName", "item.row.LinkedProductTypeLabelHint", "item.row.LinkedProductEditUrl")
            </display-template>
        </column>
        <column for="PriceAdjustmentString" width="1fr" entity-member="PriceAdjustment" halign="center" />
        <column for="WeightAdjustmentString" width="1fr" entity-member="WeightAdjustment" halign="center" />
        <column for="IsPreSelected" halign="center" />
        <column for="DisplayOrder" halign="center" />
    </columns>
    <row-commands>
        <a datarow-action="DataRowAction.Custom" class="grid-edit-attr-values" :data-key="item.row.Id">@T("Common.Edit")</a>
        <a datarow-action="DataRowAction.Delete">@T("Common.Delete")</a>
    </row-commands>
</datagrid>

<button type="submit" id="btnRefresh" name="btnRefresh" value="btnRefresh" class="d-none" />

<script>
    $(function () {
        // Refresh grid after popup edit dialog was closed.
        $(document).on('click', '#btnRefresh', function () {
            window["product-attribute-values-grid"].$children[0].read();
            return false;
        });

        // Open popup on create click.
        $(document).on('click', '#btnAddNewValue', function (e) {
            e.preventDefault();

            var href = '@Url.Action("ProductAttributeValueCreatePopup", "Product", new { productVariantAttributeId = parentModel.ProductVariantAttributeId, btnId = "btnRefresh", formId = "productvariantattribute-form" })';
            openPopup(href, true);
			return false;
        });

        // Open popup on edit click.
        $(document).on('click', '.grid-edit-attr-values', function (e) {
            e.preventDefault();

            var id = $(this).data("key");
            var href = '@Url.Content("~/Admin/Product/ProductAttributeValueEditPopup/")' + id + '?btnId=btnRefresh&formId=productvariantattribute-form';
            openPopup(href, true);
			return false;
        });
    });
</script>